import type { ProFormInstance } from '@ant-design/pro-form';
import {
  DrawerForm,
  ProFormDigit,
  ProFormSelect,
  ProFormSwitch,
} from '@ant-design/pro-form';
import { Col, Divider, Row } from 'antd';
import React, { useRef, useState } from 'react';
import { useModel } from 'umi';

import * as api from '@/services/ad';

type FormProps = {
  visible: boolean;
  defaultProductId: string | undefined;
  onCancel: () => void;
  onSubmit: () => void;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, defaultProductId, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  const [productId, setProductId] = useState<string | undefined>(
    defaultProductId,
  );
  const [current, setCurrent] = useState<API.ProductAdConfig | undefined>(
    undefined,
  );

  let defaultCurrent: Partial<API.ProductAdConfig> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      productId:
        defaultProductId != undefined ? parseInt(defaultProductId) : undefined,
      adMobAppOpenInterval: 1,
      adMobAppOpenTimeout: 30,
      adMobAppOpenStrictMode: true,

      adMobInterstitialInterval: 1,
      adMobInterstitialTimeout: 30,
      adMobInterstitialIpMoveTimeout: 30,

      adMobBannerInterval: 1,
      adMobBannerTimeout: 30,

      adMobNativeInterval: 1,
      adMobNativeTimeout: 30,

      selfAppOpenInterval: 30,
      selfAppOpenCloseDelay: 3,

      selfInterstitialInterval: 30,
      selfInterstitialCloseDelay: 3,
      selfInterstitialBeforeTrigger: false,
      selfInterstitialAfterTrigger: true,

      selfBannerAutoPlay: true,
      selfBannerInterval: 5,

      selfFloatingCloseable: false,
      selfFloatingInterval: 0,
    };
  }

  const { getProduct, getProductOptions } = useModel(
    'useGlobalModel',
    (model) => ({
      getProduct: model.getProduct,
      getProductOptions: model.getProductOptions,
    }),
  );

  const productOptions = getProductOptions(false);

  const handleFormSubmit = async (record: API.ProductAdConfig) => {
    let result: API.Result;
    result = await api.updateConfig({
      ...current,
      ...record,
    });

    if (result && result.success === true) {
      onSubmit();
    }
  };

  const formRef = useRef<ProFormInstance>();

  return (
    <DrawerForm<API.ProductAdConfig>
      open={visible}
      formRef={formRef}
      autoFocusFirstInput
      width={1224}
      title={`编辑广告配置`}
      initialValues={current ? current : defaultCurrent}
      onFinish={handleFormSubmit}
      drawerProps={{
        onClose: onCancel,
        maskClosable: false,
      }}
      params={{
        productId: productId,
      }}
      request={api.getConfig}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormSelect
            name="productId"
            label="产品"
            options={productOptions}
            rules={[{ required: true, message: '请选择产品' }]}
            allowClear={false}
            fieldProps={{
              onSelect: (value, options) => {
                //console.log('value: ', value, ' options:', options);
                setProductId(value);
              },
            }}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <Divider orientation="left" orientationMargin="0">
            AdMob
          </Divider>
        </Col>
        <Col span={8}>
          <ProFormDigit
            name="adMobAppOpenInterval"
            label="开屏 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={8}>
          <ProFormDigit
            name="adMobAppOpenTimeout"
            label="开屏 Timeout(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={8}>
          <ProFormSwitch
            name="adMobAppOpenStrictMode"
            label="严格控制漂移模式"
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormDigit
            name="adMobInterstitialInterval"
            label="插屏 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={8}>
          <ProFormDigit
            name="adMobInterstitialTimeout"
            label="插屏 Timeout(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={8}>
          <ProFormDigit
            name="adMobInterstitialIpMoveTimeout"
            label="漂移插屏 Timeout(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormDigit
            name="adMobBannerInterval"
            label="横幅 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        {/* <Col span={8}>
          <ProFormDigit
            name="adMobBannerTimeout"
            label="横幅 Timeout(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col> */}
      </Row>
      <Row gutter={24}>
        <Col span={8}>
          <ProFormDigit
            name="adMobNativeInterval"
            label="原生 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        {/* <Col span={8}>
          <ProFormDigit
            name="adMobNativeTimeout"
            label="原生 Timeout(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col> */}
      </Row>
      <Row gutter={24}>
        <Col span={24}>
          <Divider orientation="left" orientationMargin="0">
            直客广告
          </Divider>
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="selfAppOpenInterval"
            label="开屏 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="selfAppOpenCloseDelay"
            label="开屏 CloseDelay(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={6}>
          <ProFormSwitch
            name="selfInterstitialBeforeTrigger"
            label="插屏 BeforeTrigger"
          />
        </Col>
        <Col span={6}>
          <ProFormSwitch
            name="selfInterstitialAfterTrigger"
            label="插屏 AfterTrigger"
          />
        </Col>
        <Col span={6}>
          <ProFormDigit
            name="selfInterstitialInterval"
            label="插屏 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
        <Col span={6}>
          <ProFormDigit
            name="selfInterstitialCloseDelay"
            label="插屏 CloseDelay(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSwitch name="selfBannerAutoPlay" label="横幅 AutoPlay" />
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="selfBannerInterval"
            label="横幅 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSwitch name="selfFloatingCloseable" label="浮动 Closeable" />
        </Col>
        <Col span={12}>
          <ProFormDigit
            name="selfFloatingInterval"
            label="浮动 Interval(秒)"
            min={0}
            rules={[{ required: true }]}
          />
        </Col>
      </Row>
    </DrawerForm>
  );
};

export default Form;
